
let lineOpt = {
    // 显示提示
    tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(245, 245, 245, 0.8)",
        borderWidth: 1,
        borderColor: "#ccc",
        padding: 10,
        textStyle: {
            color: "#000"
        },
        axisPointer: {
            type: "none"
        },
        formatter: function (params) {
            return `<div style="width:194px;height:96px;border-radius:4px;position:relative;">
            <p>${params[0].name}</p>
            <div style="width:8px;height:8px; position:absolute;top:42px;left:10px;background-color:#6BCEF0;border-radius:50%;"></div>
            <ul>
              <li>
                <span style="margin-right:20px">${params[0].seriesName ? params[0].seriesName : params[0].name}</span>
                <span>${params[0].value}</span>
              </li>
            </ul>
          </div>`;
        }
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
        type: "value"
    },
    series: [
        {
            data: [1320, 1290, 2313, 634, 344, 1222, 788], // 图表数据
            smooth: true, // 是否为平滑曲线
            name: '新增会员数',// tooltip中显示
            symbol: "circle", // 标记的图形
            symbolSize: 6, // 标记大小
            lineStyle: { // 折线的样式
                width: 2,
                shadowColor: "rgba(0,0,0,0.4)",
                shadowBlur: 7,
                shadowOffsetY: 30, // 阴影y轴上的偏移值
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#6BCEF0" // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "#5449E5" // 100% 处的颜色
                        }
                    ]
                }
            },
            itemStyle: { // 拐点的样式
                color: "#509BF2",
                borderColor: "#fff"
            },
            type: "line"
        }
    ]
}

let barOpt = {
    // 显示提示
    tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(245, 245, 245, 0.8)",
        borderWidth: 1,
        borderColor: "#ccc",
        padding: 10,
        textStyle: {
            color: "#000"
        },
        axisPointer: {
            type: 'none'
        },
        formatter: function (params) {
            return `<div style="width:194px;height:96px;border-radius:4px;position:relative;">
            <p>${params[0].name}</p>
            <div
              style="width:8px;height:8px; position:absolute;top:42px;left:10px;background-color:#6BCEF0;border-radius:50%;"
            ></div>
            <ul>
              <li>
                <span style="margin-right:20px">${params[0].seriesName ? params[0].seriesName : params[0].axisValue}</span>
                <span>${params[0].value}</span>
              </li>
            </ul>
          </div>`;
        }
    },
    xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
            alignWithLabel: true
        }
    },
    yAxis: {
        type: "value"
    },
    series: [
        {
            data: [1320, 1290, 2313, 634, 344, 1222, 788], // 图表数据
            name: "",
            barWidth: '20%',
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
                color: "#2e6beb",
                barBorderRadius: [50, 50, 0, 0]
            },
            type: "bar"
        }
    ]
}

let hbarOpt = {
    // 显示提示
    tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(245, 245, 245, 0.8)",
        borderWidth: 1,
        borderColor: "#ccc",
        padding: 10,
        textStyle: {
            color: "#000"
        },
        axisPointer: {
            type: "none"
        },
        formatter: function (params) {
            return `<div style="width:194px;height:96px;border-radius:4px;position:relative;">
                <p>${params[0].name}</p>
                <div
                  style="width:8px;height:8px; position:absolute;top:42px;left:10px;background-color:#6BCEF0;border-radius:50%;"
                ></div>
                <ul>
                  <li>
                    <span style="margin-right:20px">${params[0].seriesName ? params[0].seriesName : params[0].axisValue}</span>
                    <span>${params[0].value}</span>
                  </li>
                </ul>
              </div>`;
        }
    },
    xAxis: {
        type: "value"

    },
    yAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
            alignWithLabel: true
        }
    },
    series: [
        {
            data: [1320, 1290, 2313, 634, 344, 1222, 788], // 图表数据
            name: "新增会员数",
            barWidth: '30%',
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
                color: "#2e6beb",
                barBorderRadius: [0, 50, 50, 0]
            },
            type: "bar"
        }
    ]
}
/**
 * 绘制折线图的函数
 * @param {Object}  传入一个画布容器对象 
 * @param {xAxisData:Array,seriesData:Array} chartOption 传入数据对象 包含x轴数据 以及 图表数据 比如 { xAxisData:[……],seriesData:[……] }
 */
export const drawnLine = function (echartObj, chartOption) {

    lineOpt.xAxis.data = chartOption.xAxisData
    lineOpt.series[0].data = chartOption.seriesData
    lineOpt.series[0].name = chartOption.seriesName ? chartOption.seriesName : ""
    return echartObj.setOption(lineOpt)
}
/**
 * 绘制柱形图的函数
 * @param {Object}  传入一个画布容器对象 
 * @param {xAxisData:Array,seriesData:Array} chartOption 传入数据对象 包含x轴数据 以及 图表数据 比如 { xAxisData:[……],seriesData:[……] }
 */
export const drawnBar = function (echartObj, chartOption) {
    barOpt.xAxis.data = chartOption.xAxisData
    barOpt.series[0].data = chartOption.seriesData
    barOpt.series[0].name = chartOption.seriesName ? chartOption.seriesName : ""
    if (chartOption.xAxisRotate) {
        barOpt.xAxis.axisLabel = {
            rotate: -40
        }
    } else {
        barOpt.xAxis.axisLabel = {

        }
    }
    return echartObj.setOption(barOpt)
}
/**
 * 绘制横向柱形图的函数
 * @param {Object}  传入一个画布容器对象 
 * @param {xAxisData:Array,seriesData:Array} chartOption 传入数据对象 包含x轴数据 以及 图表数据 比如 { xAxisData:[……],seriesData:[……] }
 */
export const drawnHBar = function (echartObj, chartOption) {
    hbarOpt.yAxis.data = chartOption.xAxisData
    hbarOpt.series[0].data = chartOption.seriesData
    hbarOpt.series[0].name = chartOption.seriesName ? chartOption.seriesName : ""
    return echartObj.setOption(hbarOpt)
}